<template>
  <a-form :label-col="{span:4}" :wrapper-col="{span:8}">
    <a-form-item label="用户名">
      <span>{{ userInfo.username }}</span>
    </a-form-item>
    <a-form-item label="昵称">
      <a-input v-model:value="userInfo.nickname"></a-input>
    </a-form-item>
    <a-form-item label="密码">
      <a-button type="primary" @click="showEditPasswordModal=true">修改密码</a-button>
    </a-form-item>
    <a-form-item label="头像">
      <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="/api/system/avatar/upload"
          :before-upload="beforeUpload"
          @change="handleChange"
          :headers="{'Authorization':'Bearer '+getToken()}"
      >
        <img style="width:100%;height:100%;" v-if="imageUrl" :src="imageUrl" alt="avatar"/>
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">点击上传</div>
        </div>
      </a-upload>
    </a-form-item>
  </a-form>
  <a-modal v-model:visible="showEditPasswordModal" title="修改密码" @ok="handleRestPassword">
    <a-form ref="resetPasswordFormRef" :model="resetPasswordForm" :label-col="{span:8}" :wrapper-col="{span:10}">
      <a-form-item label="旧密码"
                   name="oldPassword"
                   :rules="[{ required: true, message: '请输入旧密码' }]">
        <a-input-password v-model:value="resetPasswordForm.oldPassword"></a-input-password>
      </a-form-item>
      <a-form-item label="新密码"
                   name="newPassword1"
                   :rules="[{ required: true, message: '请输入新密码' }]">
        <a-input-password v-model:value="resetPasswordForm.newPassword1"></a-input-password>
      </a-form-item>
      <a-form-item label="重复新密码"
                   name="newPassword2"
                   :rules="[{ required: true, message: '请再次输入新密码' }]">
        <a-input-password v-model:value="resetPasswordForm.newPassword2"></a-input-password>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import {nextTick, ref} from "vue";
import store from "@/store/store.js";
import request, {getToken} from "@/util/request.js";
import {message} from "ant-design-vue";

const userInfo = ref({})
userInfo.value = {...store.state.user.userInfo}

const showEditPasswordModal = ref(false);
let resetPasswordFormRef = ref(null);
const resetPasswordForm = ref({oldPassword: null, newPassword1: null, newPassword2: null})

//重置密码
function handleRestPassword() {
  resetPasswordFormRef.value.validate().then((res) => {
    request({
      method: 'post',
      url: '/api/login/changePassword',
      params: resetPasswordForm.value
    }).then((res) => {
      if (res.success) {
        message.success("修改成功");
        showEditPasswordModal.value = false
      } else {
        message.error(res.errMsg);
      }
    });
  }).catch(() => {
  })
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
  if (!isJpgOrPng) {
    message.error('请上传jpeg或png文件!');
    return false;
  }
  const isLt4M = file.size / 1024 / 1024 < 4;
  if (!isLt4M) {
    message.error('文件大小不可超过4MB!');
    return false;
  }
  return true;
}

const loading = ref(false);
console.log(store.state.user.userInfo)
const AVATAR_URL = "/api/system/avatar/preview?Authorization=" + getToken() + "&file=" + store.state.user.userInfo.avatarFileHashCode;
const imageUrl = ref(AVATAR_URL)
const fileList = ref([])

function handleChange(info) {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    const response = info.file.response;
    const newFileHash = response.data;
    imageUrl.value = `/api/system/avatar/preview?file=${newFileHash}&Authorization=${getToken()}`
    loading.value = false;
    store.commit("user/setAvatar", newFileHash)
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('上传失败');
  }
}
</script>
